<template>
  <div>
    <el-container>
      <!-- 问卷头部 放一些按钮 -->
      <el-header>
        <div class="buttons-header">
          <div></div>
          <div class="buttons">
            <el-button  class="b1" @click="output">导出</el-button>
            &nbsp;
            <el-button  class="b2" @click="close">关闭</el-button>
          </div>
        </div>
      </el-header>
      <el-main style="overflow-y: hidden" class="main-background">
        <!-- 问卷主体区域 -->
        <el-card class="main-area">
          <el-progress
            :percentage="
              Number(
                (questionnaire.total / questionnaire.questions.length) * 100
              )
            "
            :show-text="false"
          ></el-progress>
          <!-- 问卷内容部分 -->
          <div class="content-area">
            <div class="name1">
              <span>{{ questionnaire.title }}</span>
            </div>
            <div class="description">
              <span>{{ questionnaire.desc }}</span>
            </div>
            <!-- 问卷问题 -->
            <div
              class="question-area"
              v-for="(question, index) in questionnaire.questions"
              :key="index"
            >
              <single-preview
                v-if="question.type === 'single'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
                :showNumber="questionnaire.show_number"
              ></single-preview>
              <multi-preview
                v-if="question.type === 'multi'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
                :showNumber="questionnaire.show_number"
              ></multi-preview>
              <fill-preview
                v-if="question.type === 'fill'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
                :showNumber="questionnaire.show_number"
              ></fill-preview>
              <grade-preview
                v-if="question.type === 'grade'"
                :question="question"
                :number="index + 1"
                :changeAnswers="changeAnswers"
                :showNumber="questionnaire.show_number"
              ></grade-preview>
            </div>
            <!-- 提交按钮 -->
            <div class="commit">
              <el-button
                type="primary"
                class="commit-button"
                @click="commitAnswer"
                >提交</el-button
              >
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import axios from "axios";
  import FillPreview from "../components/Preview/FillPreview.vue";
  import GradePreview from "../components/Preview/GradePreview.vue";
  import MultiPreview from "../components/Preview/MultiPreview.vue";
  import SinglePreview from "../components/Preview/SinglePreview.vue";
  export default {
    components: { SinglePreview, MultiPreview, FillPreview, GradePreview },
    data() {
      return {
        form_output:{
          questionnaire_id:'',
          form:'',
        },
        questionnaire: {
          title: "",
          desc: "",
          total: 0,
          questions: [],
        },
        questionnaire_id: null,
        to: null,
        timer: null,
        // answer
      };
    },
    async created() {
      this.questionnaire_id = this.$route.params.id;
      this.to = this.$route.params.id;
      await axios
        .post("decode/", {
          questionnaire_id: this.questionnaire_id,
        })
        .then((response) => {
          if (response.data.code == -1) {
            this.$router.push({
              path: "/failure",
              query: {
                msg: "该问卷不存在或您没有权限访问",
              },
            });
          }
          this.questionnaire_id = response.data.id;
        });
      // clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
        await this.getQuestionnaire();
      // }, 200);
    },
    methods: {
      output:function (){
        this.form_output.questionnaire_id=this.questionnaire_id
        this.form_output.form='docx'
        axios.post('export_questionnaire/',this.form_output).then((response) =>{
          window.open(response.data.url, '_blank')
        })
      },
      commitAnswer() {
        alert("预览界面不能提交！");
      },
      getQuestionnaire() {
        // eslint-disable-next-line no-unused-vars
        return new Promise((resolve, reject) => {
          // 获取问卷列表
          const formData = {
            questionnaire_id: this.questionnaire_id,
          };
          axios.post("preview/", formData).then((response) => {
            this.questionnaire = response.data;
            console.log(this.questionnaire.questions);
          });
        });
      },
      // 当子组件改变已填写的答案时调用
      // 实时增删改问题列表中的答案
      // index: 题号
      // answer: 新的答案
      changeAnswers(index, answer) {
        if (typeof answer === "object") {
          this.questionnaire.questions[index - 1]["answer"] = [];
          for (var i = 0; i < answer.length; i++) {
            this.questionnaire.questions[index - 1]["answer"].push({
              option_id: answer[i],
            });
          }
        } else if (typeof answer === "number") {
          this.questionnaire.questions[index - 1]["grade"] = answer;
        } else {
          this.questionnaire.questions[index - 1]["fill"] = answer;
        }
      },
      close() {
        this.$router.push("/questionnaire/" + this.to);
      },
    },
    watch: {
      questionnaire: {
        handler: function () {
          console.log("本地问卷");
          console.log(this.questionnaire.questions);
          var count = 0;
          for (var i = 0; i < this.questionnaire.questions.length; i++) {
            // console.log(this.questionnaire.questions[i].answer)
            if (
              (this.questionnaire.questions[i].answer &&
                this.questionnaire.questions[i].answer.length) ||
              this.questionnaire.questions[i].grade ||
              this.questionnaire.questions[i].fill
            ) {
              count += 1;
            }
          }
          this.questionnaire.total = count;
        },
        deep: true,
      },
    },
  };
</script>

<style scoped>
.el-header {
  --el-header-padding: 0;
  opacity: 0.9;
}

.el-main {
  --el-main-padding: 160px 220px 160px 220px;
  height: 100%;
}

.main-area {
  height: 100%;
}

.name1 {
  display: flex;
  justify-content: center;
  font-family: "微软雅黑";
  font-size: 30px;
}

.description {
  margin-top: 40px;
  font-size: 16px;
}

.content-area {
  margin: 40px;
  font-family: "微软雅黑";
}

.commit {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.commit-button {
  width: 220px;
  height: 40px;
}

.question-area {
  margin-top: 45px;
}

.buttons-header {
  display: flex;
  justify-content: space-between;
}

.buttons {
  margin-top: 10px;
  margin-right: 20px;
}

.el-card {
  opacity: 0.9;
}

.el-container {
  background-image: url(../assets/img2.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>